AngularJSとRuby on Railsで作るCRUDアプリ – (5)Delete
はじめに
前回構築したAngularJS+Ruby on Railsのアプリに
今回はCRUDの内のDelete機能を実装し、ウィスキーの情報を削除する機能を作成しました。
一覧画面(index.html.erb)のDeleteリンクをクリックすると
AngularJSにより非同期でサーバを呼び出し、削除を行います。
以下に、実装する上でのポイントとなる箇所を記述していきます。
尚、ソースコードは以下のGitHubに置いてあるので、全ソースを見たい方は参考にしてください。
AngularjsWhiskyList
実装について
1.一覧画面
一覧画面は前回と同じです。
index.html.erb
<h1>Whiskies#index</h1> <%= link_to "new whisky", new_whisky_path, :class => 'btn btn-mini' %> <table ng-controller="WhiskiesCtrl" class="table"> <tr ng-repeat="whisky in data"> <td>{{whisky.name}}</td> <td>${{whisky.price}}</td> <td><a href="/whiskies/{{whisky.id}}/edit" class="btn btn-mini">Edit</a></td> <td><button ng-click="Delete(whisky);" class="btn btn-mini">Delete</button></td> </tr> </table>
Deleteリンクを押下すると、「ng-click="Delete(whisky)」にて
AngularJSのDelete()メソッドが呼び出されます。
引数として、削除対象のwhiskyオブジェクトを渡しています。
2.AngularJS
Deleteリンクを押下時に呼び出される、AngularJSのDelete()です。
上記の一覧画面で参照しているコントローラ「WhiskiesCtrl」ごと載せておきます。
controllers.js
whiskiesListApp.controller('WhiskiesCtrl', function ($scope, $http, $window) { $http.get('whiskies/list').success(function(data) { $scope.data = data; }); $scope.Delete = function(whisky){ $http.delete('/whiskies/' + whisky.id ).success(function(data, status, headers, config) { $window.location.href = '/'; }).error(function(data, status) { console.log('error:' + status); }); } });
ここでのポイントは
・「$http.delete・・・」にて、HTTPのDELETEメソッドを使用している
・「whisky.id」にて削除対象のデータのidを取得し、URLに組み込んでいる
ところです。
Railsのルーティングを、$ rake routes で確認すると、削除については
whisky (中略) DELETE /whiskies/:id(.:format) whiskies#destroy
となります。
今回の削除についても
・HTTPのDELETEメソッドを使用して呼び出しを行う
・URLにて削除対象データのidを渡す
ことで、Railsのルーティングに則り、サーバに削除要求を投げています。
なお、サーバ側はRailsのdestory()アクションが削除処理を行いますが
これはActiveRecordを使用したdelete処理なので、省略します。
参照したい方は、GitHubのソースを参考にして下さい。
最後に
前回と同様、AngularJSの$httpを使い、deleteなどRailsのルーティングに即した、
言い換えればRESTに則ったURLの呼び出しで処理を行うことができました。